import 'package:flutter/material.dart';
import 'constants.dart' show Constants, AppColors;
import 'conversation_page.dart';

enum ActionItems { GROUP_CHAT, ADD_FRIEND, QR_SCAN, PAYMENT, HIELP }

/**
 * 定义一个tab  的类，
 * 成员变量使用_开头表示内不会用，类似java的private 作用域
 */
class NavigationIconView {
  final BottomNavigationBarItem item; //对外暴露的类

  /**
   * 构造方法进行赋值
   */
  NavigationIconView({String title, IconData icon, IconData activeIcon})
      : item = new BottomNavigationBarItem(
          title: Text(title),
          icon: Icon(icon), //可以通过类查看构造方法参数
          activeIcon: Icon(
            activeIcon,
          ),
          backgroundColor: Colors.white,
        );
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;
  //定义一个tab 集合
  List<NavigationIconView> _navigationViews;
  PageController _pageController;  // 添加页面控制器
  List<Widget> _pages;  // 添加页面的数组

  /**
   * 第一次加载的时候初始化tab数据
   */
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _navigationViews = [
      NavigationIconView(
        icon: IconData(
          0xe608, // icon 代码
          fontFamily: Constants.IconFontFamily, // 引用类
        ),
        activeIcon: IconData(0xe603, fontFamily: Constants.IconFontFamily),
        title: '微信',
      ),
      NavigationIconView(
        icon: IconData(0xe600, fontFamily: Constants.IconFontFamily),
        activeIcon: IconData(0xe6c2, fontFamily: Constants.IconFontFamily),
        title: '通讯录',
      ),
      NavigationIconView(
          icon: IconData(0xe634, fontFamily: Constants.IconFontFamily),
          activeIcon: IconData(0xe623, fontFamily: Constants.IconFontFamily),
          title: '发现'),
      NavigationIconView(
          icon: IconData(0xe6c9, fontFamily: Constants.IconFontFamily),
          activeIcon: IconData(0xe607, fontFamily: Constants.IconFontFamily),
          title: "我")
    ];
    _pageController = PageController(initialPage: _currentIndex);  // 对页面控制器进行初始化
    _pages = [  // 初始化页面数组
      ConversationPage(),   // 引用会话页面
      Container(
        color: Colors.green,
      ),
      Container(
        color: Colors.blue,
      ),
      Container(
        color: Colors.yellow,
      )
    ];
  }

  /**
   * 封装右上角下拉框
   * icon : icon 代码，表示下拉框选项菜单图标
   * title : 表示下拉框选项
   */
  _buildPopupMunuItem(int icon, String title) {
    return Row(
      // 行的组件
      children: <Widget>[
        Icon(
          IconData(
            icon,
            fontFamily: Constants.IconFontFamily,
          ),
          size: 22, // icon 的大小
          //const 表示静态的不可变的，在编译阶段就可以决定的值，而不需要在程序运行时候去做这个事，可以提高程序的运行效率
          color: const Color(AppColors.AppBarPopupMenuColor), // icon 的颜色
        ),
        Container(
          width: 14,
        ),
        Text(
          title,
          style: TextStyle(color: const Color(AppColors.AppBarPopupMenuColor)),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = new BottomNavigationBar(
      fixedColor: const Color(AppColors.AppIconActive), // 表示底部tab按钮选中的颜色
      items: _navigationViews.map((NavigationIconView view) {
        return view.item;
      }).toList(),
      currentIndex: _currentIndex, // 当前选择下标
      type: BottomNavigationBarType.fixed, //图标选中和未选中的位子一样，
      onTap: (int index) {
        // 回调函数
        setState(() {
          _currentIndex = index;
          // 当tab按钮被改变的时候切换页面
          _pageController.animateToPage(_currentIndex,duration: Duration(milliseconds: 200),curve: Curves.easeInOut);
        });
      },
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('微信'),
        elevation: 0.0, //控制顶部菜单栏下的阴影
        actions: [
          IconButton(
            icon: Icon(IconData(0xe667, fontFamily: Constants.IconFontFamily)),
            onPressed: () {
              print('点击搜索');
            },
          ),
          Container(
            //这个容器给两个图标之间添加间距
            width: 6,
          ),
          // IconButton(
          //   icon: Icon(IconData(
          //     0xe606,
          //     fontFamily: Constants.IconFontFamily
          //   )),
          //   onPressed: (){print('点击添加');},
          // )
          PopupMenuButton(
            itemBuilder: (BuildContext context) {
              return <PopupMenuItem<ActionItems>>[
                PopupMenuItem(
                  child: _buildPopupMunuItem(0xe69e, '发起群聊'),
                  value: ActionItems.GROUP_CHAT,
                ),
                PopupMenuItem(
                  child: _buildPopupMunuItem(0xe624, '添加朋友'),
                  value: ActionItems.ADD_FRIEND,
                ),
                PopupMenuItem(
                  child: _buildPopupMunuItem(0xe602, '扫一扫'),
                  value: ActionItems.QR_SCAN,
                ),
                PopupMenuItem(
                  child: _buildPopupMunuItem(0xe601, '收付款'),
                  value: ActionItems.PAYMENT,
                ),
                PopupMenuItem(
                  child: _buildPopupMunuItem(0xe63d, '帮助与反馈'),
                  value: ActionItems.HIELP,
                ),
              ];
            },
            icon: Icon(IconData(0xe606, fontFamily: Constants.IconFontFamily)),
            onSelected: (ActionItems selected) {
              print('点击的是$selected');
            },
          )
        ],
        //backgroundColor: Color(0xff303030),//标题的颜色
      ),
      body: PageView.builder(
        itemBuilder: (BuildContext context, int index) {
          return _pages[index];
        },
        controller: _pageController,
        itemCount: _pages.length, // 制定页面数量
        onPageChanged: (int index) {  // 回调函数
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      bottomNavigationBar: botNavBar,
    );
  }
}
